 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width1">修改用户</div>
      </div>
      <div class="content-con">
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="110" class="user-item">
          <Form-item label="用户ID" prop="id">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.id" size="large" readonly></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="用户名" prop="name">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.name" size="large" placeholder="请输入用户名"></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="用户昵称" prop="nickname">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.nickname" size="large" placeholder="请输入用户昵称"></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="密码" prop="passw">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.passw" size="large" placeholder="不修改密码请留空"></i-input>
              </i-col>
              <i-col span="14">
                <span class="user-right">请填写6到12位密码</span>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="邮箱" prop="email">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.email" size="large" placeholder="输入邮箱"></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="手机号" prop="phone">
            <Row>
              <i-col span="10">
                <i-input v-model="formValidate.phone" size="large" placeholder="输入手机号"></i-input>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="超级管理" prop="manage">
            <Row>
              <i-col span="10">
                <Radio-group v-model="formValidate.manage" size="large">
                  <Radio label="yes">
                      <span>是</span>
                  </Radio>
                  <Radio label="no">
                      <span>否</span>
                  </Radio>
                </Radio-group>
              </i-col>
              <i-col span="14">
                <span class="user-right">超管拥有所有菜单权限</span>
              </i-col>
            </Row>
          </Form-item>
          <Form-item label="状态" prop="statu">
            <Radio-group v-model="formValidate.statu" size="large">
              <Radio label="start">
                  <span>启用</span>
              </Radio>
              <Radio label="stop">
                  <span>停止</span>
              </Radio>
            </Radio-group>
          </Form-item>
          <div class="ban-btn">
            <i-button @click="handleSubmit('formValidate')" class="save" size="large">保存</i-button>
            <i-button class="save" size="large" @click="btnClick1">返回</i-button>
          </div>
        </i-form>
        <!-- <div class="form-item">
            <Row style="padding-top: 15px;"
            v-for="(user,index) in userData"
            :key='user.id'>
              <i-col span="10" v-if="index == 0">
                <Row>
                  <i-col span="8" class="item-name text-right">{{user.title}}</i-col>
                  <i-col span="16">
                    <i-input size="large" :value.sync="user.value" readonly></i-input>
                  </i-col>
                </Row>
              </i-col>
              <i-col span="20" v-else-if="index == 3">
                <Row>
                  <i-col span="4" class="item-name text-right">{{user.title}}</i-col>
                  <i-col span="8">
                    <i-input size="large" :value.sync="user.value" :placeholder="user.place"></i-input>
                  </i-col>
                  <i-col span="16" class="item-name font-grey">请填写6到12位密码</i-col>
                </Row>
              </i-col>
              <i-col span="20" v-else-if="index == 6">
                <Row>
                  <i-col span="4" class="item-name text-right">{{user.title}}</i-col>
                  <i-col span="8">
                    <Radio-group :model.sync="manager" style="padding: 8px 0 0 12px;">
                      <Radio size="large" value="是">是</Radio>
                      <Radio size="large" value="否">否</Radio>
                    </Radio-group>
                  </i-col>
                  <i-col span="16" class="item-name font-grey">超管拥有所有菜单权限</i-col>
                </Row>
              </i-col>
              <i-col span="10" v-else-if="index == 7">
                <Row>
                  <i-col span="8" class="item-name text-right">{{user.title}}</i-col>
                  <i-col span="16">
                    <Radio-group :model.sync="status" style="padding: 8px 0 0 12px;">
                      <Radio size="large" value="启用">启用</Radio>
                      <Radio size="large" value="停止">停止</Radio>
                    </Radio-group>
                  </i-col>
                </Row>
              </i-col>
              <i-col span="10" v-else>
                <Row>
                  <i-col span="8" class="item-name text-right">{{user.title}}</i-col>
                  <i-col span="16">
                    <i-input size="large" :value.sync="user.value" :placeholder="user.place"></i-input>
                  </i-col>
                </Row>
              </i-col>
            </Row>
          </div> -->
        <!-- <div class="ban-btn">
          <i-button class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </div> -->
      </div>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 export default {
   name: 'user-edit',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       value: '',
       manager: '是',
       status: '启用',
       formValidate:{
         id: '1',
         name: 'xx',
         nickname: '超级管理员',
         passw: '',
         email: 'xxpay@126.com',
         phone: '00000000',
         manage: 'yes',
         statu: 'start'
       },
       ruleValidate:{
         name:[
           {
             required: true,
             message: '请输入用户名',
             trigger: 'blur'
           }
         ],
         nickname:[
           {
             required: true,
             message: '输入用户昵称',
             trigger: 'blur'
           }
         ],
         passw:[
           {
             required: true,
             message: '不修改密码请留空',
             trigger: 'blur'
           }
         ],
         email:[
           {
             required: true,
             message: '输入邮箱',
             trigger: 'blur'
           }
         ],
         phone:[
           {
             required: true,
             message: '输入手机号',
             trigger: 'blur'
           }
         ],
         manage:[
           {
             required: true,
             message: '请选择',
             trigger: 'change'
           }
         ],
         statu:[
           {
             required: true,
             message: '请选择状态',
             trigger: 'change'
           }
         ]
        },
       userData: [
         {
           title: '用户ID',
           value: '1'
         },
         {
           title: '用户名',
           value: 'xx',
           place: '输入用户名'
         },
         {
           title: '用户昵称',
           value: '超级管理员',
           place: '输入用户昵称'
         },
         {
           title: '密码',
           value: '',
           place: '不修改密码请留空'
         },
         {
           title: '邮箱',
           value: 'xxpay@126.com',
           place: '输入邮箱'
         },
         {
           title: '手机号',
           value: '00000000',
           place: '输入手机号'
         },
         {
           title: '超级管理',
           value: '是'
         },
         {
           title: '状态',
           value: '启用'
         }
       ]
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'user_management'})
     },
     //表单验证
     handleSubmit () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     }
   }
 };
 </script>
 <style lang="less">
     .user-item .ivu-form-item-label{
       font-size: 14px;
     }
     .user-right{
       margin-left: 15px;
       color: #999;
       font-size: 14px;
       height: 36px;
       line-height: 20px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
     }
 </style>
